<template>
  <div>
    <el-page-header @back="$router.back()" :content="$route.name"/>
    <el-form :model="ruleForm" status-icon :rules="rules" label-position="left"
             ref="ruleForm" label-width="100px" class="from demo-dynamic">
      <el-form-item label="描述" prop="desc">
        <el-input v-model="ruleForm.desc"/>
      </el-form-item>
      <el-form-item label="重量" prop="weight">
        <el-slider
            v-model="ruleForm.weight"
            show-input :min="1" :max="20">
        </el-slider>
      </el-form-item>
      <el-form-item label="发货地址id" prop="senderAddr">
        <el-container style="width: 620px">
          <el-input style="width: 400px" v-model.number="ruleForm.senderAddr"></el-input>
          <el-tag type="success" v-if="tips.senderAddr" v-text="tips.senderAddr"/>
        </el-container>
      </el-form-item>
      <el-form-item label="收货地址id" prop="receiverAddr">
        <el-container style="width: 620px">
          <el-input style="width: 400px" v-model.number="ruleForm.receiverAddr"/>
          <el-tag type="success" v-if="tips.receiverAddr" v-text="tips.receiverAddr"/>
        </el-container>
      </el-form-item>
      <el-form-item>
        <el-col :span="8">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-col>
        <el-col :span="8" style="text-align: center">
          <el-button @click="$router.push('/my/pkg')">取消</el-button>
        </el-col>
        <el-col :span="8">
          <el-button style="float: right" @click="resetForm('ruleForm')">重置</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "PkgNew",
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$axios
          console.log(this.ruleForm)
          this.$axios.post(this.$serverUrl
              + '/pkg/add', this.ruleForm)
              .then(response => {
                console.log(response.data)
                this.$router.push('/my/pkg')
                this.$message({
                  showClose: true,
                  message: '添加成功!',
                  type: 'success'
                });
              })
              .catch(error => {
                console.log(error)
                this.$message({
                  showClose: true,
                  message: '添加失败!',
                  type: 'error'
                });
              })
        }
      })
    }
  },
  data() {
    return {
      value: 0,
      ruleForm: {
        desc: '',
        weight: 1,
        receiverAddr: '',
        senderAddr: ''
      },
      tips: {
        receiverAddr: '',
        senderAddr: ''
      },
      rules: {
        desc: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入包裹描述'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        senderAddr: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入发货地址id'));
              } else {
                if (!Number.isInteger(value)) {
                  callback(new Error('地址id应为整数'));
                } else {
                  this.$axios.get(this.$serverUrl
                      + '/addr/desc?id=' + value)
                      .then(response => {
                        if (response.data === '') {
                          this.tips.senderAddr = ''
                          callback(new Error('该地址无效'))
                        } else {
                          this.tips.senderAddr = response.data
                          callback();
                        }
                      })
                }
              }
            }, trigger: 'blur'
          }
        ],
        receiverAddr: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入收货地址id'));
              } else {
                if (!Number.isInteger(value)) {
                  callback(new Error('地址id应为整数'));
                } else {
                  this.$axios.get(this.$serverUrl
                      + '/addr/desc?id=' + value)
                      .then(response => {
                        if (response.data === '') {
                          this.tips.receiverAddr = ''
                          callback(new Error('该地址无效'))
                        } else {
                          this.tips.receiverAddr = response.data
                          callback();
                        }
                      })
                }
              }
            }, trigger: 'blur'
          }
        ],
      }
    }
  }
}
</script>

<style scoped>
.from {
  /*padding-left: 100px;*/
  max-width: 500px;
  margin: 50px auto;
}

.el-tag {
  width: 200px;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
}
</style>